<template>
	<view class="content" :style="{backgroundImage:`url(${indexBackgroundImage})`}">
		<view class="title">
		</view>
		<view class="main">
			<view class="logo">
				<image src="/static/publishPractice/logo1.png" mode=""></image>
			</view>
			<view class="maintop">
				<view class="activeTitle">
          <u-input v-model="artiveTitle" maxlength="20"  placeholder="请输入活动标题"></u-input>
					<text class="light">{{artiveTitleLen}}/20</text>
				</view>
				<view class="activeContent">
					<u-input type="textarea"  placeholder="请描述您的活动内容"
                 v-model="suggestion"
                   maxlength="300"
					placeholder-style="{
						width: 350px;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #323233;
					}"
					value="" />
					<view class="photo">
            <upload ref="uUpload" @chooseImg="afterReadImgs" @removeImg="deleteImgs"
                    :uploadValue="{fileList:imgList1,count:9,custom:true
      }"
            >
              <image src="/static/publishActive/add1.png" mode=""></image>
            </upload>
						<text>{{valueLen}}/300</text>
					</view>
				</view>
			</view>
      <view class="mainMiddle maintop">
        <view class="mainMiddleName">
          <view class="Left">
            <text class="light">活动预约开始时间</text>
            <input type="text" disabled  placeholder="请选择活动结束时间"
                   v-model="active.appointmentstart.value"
                   placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}"
                   @click="onAppSrtartTimes"
            />
          </view>
        </view>
        <view class="mainMiddleName">
          <view class="Left">
            <text class="light">活动预约结束时间</text>
            <input type="text" disabled  placeholder="请选择活动结束时间"
                   v-model="active.endOfappointment.value"
                   @click="onEndSEndTimes"
                   placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}"
            />
          </view>
        </view>
      </view>
			<view class="mainMiddle">
				<view class="mainMiddleName">
					<view class="Left">
						<text class="light">活动开始时间</text>
            <input type="text" disabled  placeholder="请选择活动结束时间"
                   v-model="active.start.value"
                   placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}"
                   @click="onSrtartTimes"
                  />
					</view>
				</view>
        <view class="mainMiddleName">
          <view class="Left">
            <text class="light">活动结束时间</text>
            <input type="text" disabled  placeholder="请选择活动结束时间"
                   v-model="active.end.value"
                   @click="onSEndTimes"
                   placeholder-style="{
							width: 350px;
							font-size: 26rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #283D82;
						}"
            />
          </view>
        </view>
			</view>

			<view class="jobAddress">
				<view class="jobAddressLeft">
					<text class="light">活动地址</text>
					<input type="text"  placeholder="请输入活动地址"
                 v-model="active.address"
					placeholder-style="{
						width: 350px;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #283D82;
					}"
					value="" />
				</view>
				<u-icon name="close-circle" color="#384B8B" size="28"
        @click="active.address=''"
        ></u-icon>
			</view>
			<view class="buttom">
				<button type="default" @click="onSubmit">确认发布</button>
			</view>
		</view>
    <u-picker
        mode="time"
        v-model="active.appointmentstart.show"
        :start-year="active.appointmentstart.startTime"
        :end-year="active.appointmentstart.endTime"
        :default-time="active.appointmentstart.appointmentDate"
        :params="active.appointmentstart.timeParams"
        @confirm="onappActiveStartDataChange"
    ></u-picker>
    <u-picker
        mode="time"
        v-model="active.endOfappointment.show"
        :start-year="active.endOfappointment.startTime"
        :end-year="active.endOfappointment.endTime"
        :default-time="active.endOfappointment.appointmentDate"
        :params="active.endOfappointment.timeParams"
        @confirm="onendActiveEndDataChange"
    ></u-picker>

    <u-picker
        mode="time"
        v-model="active.start.show"
        :start-year="active.start.startTime"
        :end-year="active.start.endTime"
        :default-time="active.start.appointmentDate"
        :params="active.start.timeParams"
        @confirm="onActiveStartDataChange"
    ></u-picker>
    <u-picker
        mode="time"
        v-model="active.end.show"
        :start-year="active.end.startTime"
        :end-year="active.end.endTime"
        :default-time="active.end.appointmentDate"
        :params="active.end.timeParams"
        @confirm="onActiveEndDataChange"
    ></u-picker>
		<Tabbar :current="2"></Tabbar>
	</view>
</template>

<script>
	import indexBackgroundImage from "@/static/publishPractice/bg1.png"
  import {emActivityInfo,editCompanyActivity} from '@/api/myCompan'
  import publishContentMixins from '@/mixins/publish-content-mixins'
  import {selectTimeData as selectData,getTimeDate} from '@/utils/utils'
  import {addCompanyActivity} from '@/api/activity'
  import { imageSubstr } from '@/utils/tools'
	export default {
    mixins:[publishContentMixins],
		data() {
			return {
        activeid:'',
        sysOrgCode:'',
        edit:false,
				indexBackgroundImage,
        active:{
          start:{
            ...selectData
          },
          end:{
              ...selectData
          },
          //预约
          appointmentstart:{
            ...selectData
          },
          endOfappointment:{
            ...selectData
          },
          address:''
        },
			}
		},
    onLoad(opt){
      if(opt.activeid&&opt.edit==='edit'){
        this.activeid = opt.activeid
        this.edit=true
        this.emActivityInfo(opt.activeid)
      }
      this.getTimeDates()
    },
		methods: {
      //活动详情
      emActivityInfo(id){

        emActivityInfo(id).then(res=>{
          const {code,result} = res;
          if(code===200){
           this.activePintResult(result)
          }
        }).catch(e=>{
          console.log (e)
        })
      },
      activePintResult(result){
        let listImg=[]
        const {sysOrgCode,activityAddress,activityTitle,activityDesc,activityPic,orderEndTime,orderStartTime,endTime,startTime} = result
        this.artiveTitle = activityTitle
        this.artiveTitleLen = activityTitle.length
        this.suggestion = activityDesc
        this.sysOrgCode = sysOrgCode
        activityPic.split(',').map(i=>{
          listImg.push({
            url:i
          })
        })
        this.imgList1 = listImg
        this.active.endOfappointment.value = orderEndTime
        this.active.appointmentstart.value = orderStartTime
        this.active.end.value=endTime
        this.active.start.value=startTime
        this.active.address=activityAddress
        this.active.appointmentstart.value =  orderStartTime
        this.active.appointmentstart.appointmentDate = orderStartTime
        this.active.endOfappointment.value = orderEndTime
        this.active.endOfappointment.appointmentDate = orderEndTime
      },
      //预约开始
      onAppSrtartTimes(){
        this.active.appointmentstart.show=true
      },
      //预约开始
      onEndSEndTimes(){
        if(!this.active.appointmentstart.value.length){
          this.$showToast(`必须先选择活动预约开始时间`)
          return false
        }
        this.active.endOfappointment.show=true
      },
      //开始时间
      onSrtartTimes(){
        this.active.start.show=true
      },
      //结束时间
      onSEndTimes(){
        if(!this.active.start.value.length){
          this.$showToast(`必须先选择活动开始时间`)
          return false
        }
        this.active.end.show=true
      },
      onActiveTimeChange(e,key='start'){
        const moment = this.$moment()
        const { day, month, year,hour,minute,second } = e
        const time = `${year}-${month}-${day} ${hour}:${minute}:${second}`
        if (time < moment.format('YYYY-MM-DD')) {
          this.$showToast(`不能选择过期的活动时间,请重新选择`)
          return false
        }
        if(!this.activeid || this.activeid==='' || !this.activeid.length){
          this.active[key].value = time
          this.active[key].appointmentDate = time
        } else {
          this.active[key].value = time
          this.active[key].appointmentDate = time
        }

      },
      //预约开始
      onappActiveStartDataChange(e){
        this.onActiveTimeChange(e,'appointmentstart')
      },
      //预约结束
      onendActiveEndDataChange(e){
        this.onActiveTimeChange(e,'endOfappointment')
        this.dataTimeChange('appointmentstart','endOfappointment','预约结束时间不能小于或者等于预约开始时间')
      },
      //选择活动结束时间
      onActiveEndDataChange(e){
        this.onActiveTimeChange(e,'end')
        this.dataTimeChange()
      },
      dataTimeChange(key='start',value='end',tip=`活动结束时间不能小于或者活动等于开始时间`){
        const start =  this.$moment (this.active[key].value).valueOf()
        const end =  this.$moment (this.active[value].value).valueOf()
        if(start>= end){
          this.$showToast(tip)
          this.active[value].value =this.active[key].value
          return
        }
      },
      //选择活动开始时间
      onActiveStartDataChange(e) {
        this.onActiveTimeChange(e,'start')
      },
      //设置时间操作
      getTimeDates(){
        const {ymd,startTime,endTime} =getTimeDate ()
        const active = this.active
        active.start.appointmentDate = ymd
        active.start.startTime = startTime
        active.start.endTime = endTime
        active.end.appointmentDate = ymd
        active.end.startTime = startTime
        active.end.endTime = endTime
        active.appointmentstart.appointmentDate = ymd
        active.appointmentstart.startTime = startTime
        active.appointmentstart.endTime = endTime
        active.endOfappointment.appointmentDate = ymd
        active.endOfappointment.startTime = startTime
        active.endOfappointment.endTime = endTime
      },
			//跳转列表对应页面
			nextPage(url) {
				uni.navigateTo({
					url: url,
					fail() {
						uni.switchTab({
							url: url,
							fail() {
								uni.showToast({
									title: '暂未开通，敬请期待！',
									icon: 'none'
								});
							}
						});
					}
				});
			},
      //发布活动
      async onSubmit(){
        const astart =  this.$moment (this.active.start.value).valueOf()
        const aend =  this.$moment (this.active.end.value).valueOf()

        const astart1 =  this.$moment (this.active.appointmentstart.value).valueOf()
        const aend1 =  this.$moment (this.active.endOfappointment.value).valueOf()
        if(!this.artiveTitle.length||!this.artiveTitle.trim()){
          this.$showToast('请输入活动标题')
          return false
        }
        if(!this.suggestion.length||!this.suggestion.trim()){
          this.$showToast('请输入活动内容')
          return false
        }
        if(!this.imgList1.length){
          this.$showToast('请上传活动图片')
          return false
        }
        if(!this.active.appointmentstart.value.length){
          this.$showToast('请选择活动预约开始时间')
          return false
        }
        if(!this.active.endOfappointment.value.length){
          this.$showToast('请选择活动预约结束时间')
          return false
        }
        if(astart1>= aend1){
          this.$showToast(`预约结束时间不能小于或者等于预约开始时间`)
          return
        }
        if(!this.active.start.value.length){
          this.$showToast('请选择活动开始时间')
          return false
        }
        if(!this.active.start.value.length){
          this.$showToast('请选择活动开始时间')
          return false
        }
        if(astart>= aend){
          this.$showToast(`结束时间不能小于或者等于开始时间`)
          return
        }
        if(!this.active.address.length||!this.active.address.trim()){
          this.$showToast(`请输入活动地址`)
          return
        }
        await this.onUploadChange(this.imgList1)
        setTimeout(()=>{
          this.onActiveSend(this.activeid,this.edit)
        },800)
      },
      isCbEditId(cb,data){
        cb(data).then(res=>{
          this.$hideLoading()
          const {code,message,result} =res
          if(code===200){
            this.$showToast(result)
            uni.switchTab({
              url:'/pages/publish/publish'
            })
          } else {
            this.$showToast(message)
          }
        }).catch(e=>{
          this.$hideLoading()
        })
      },
      //发布或者编辑活动
      async onActiveSend(id,edit){
        console.log ( id ,edit)
        const imageUrl = imageSubstr(this.imageList2)
        this.$showLoading({title:edit?'编辑活动中':'发布活动中'})
        let data={
          "activityAddress":this.active.address,
          "activityDesc": this.suggestion,
          "activityPic": imageUrl,
          "activityTitle": this.artiveTitle,
          "endTime":this.active.end.value,
          "startTime": this.active.start.value,
          orderEndTime:this.active.endOfappointment.value,
          orderStartTime:this.active.appointmentstart.value,
        }
        if(edit){
          data['id']=id
          data['sysOrgCode']=this.sysOrgCode
          this.isCbEditId(editCompanyActivity,data)
        } else {
          this.isCbEditId(addCompanyActivity,data)
        }
      }
		}
	}
</script>

<style lang="scss" scoped>
.content{
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: 100%;
	.title{
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		.u-icon{
			position: absolute;
			height: 100rpx;
			left: 20rpx;
		}
		text{
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
		}
	}
	.main{
		position: relative;
		margin: 130rpx 36rpx 20rpx 36rpx;
		padding-bottom: 100rpx;
		.logo{
			position: absolute;
			width: 100%;
			top: -138rpx;
			text-align: center;
			image{
				width: 320rpx;
				height: 174rpx;
			}
		}
		.maintop{
			margin-bottom: 20rpx;
			padding: 20rpx 38rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			.activeTitle{
				margin-bottom: 20rpx;
				padding: 20rpx 0;
				display: flex;
				justify-content: space-between;
				border-bottom: #EAEAEA 1rpx solid;
				text{
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #283D82;
				}
				.light{
					font-size: 24rpx;
					font-weight: 500;
					color: #969799;
				}
			}
			.activeContent{
				position: relative;
				.photo{
					margin-top: 90rpx;
					image{
						width: 140rpx;
						height: 140rpx;
					}
					text{
						position: absolute;
						right: 0;
						bottom: 6rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #969799;
					}
				}
			}
		}
		.mainMiddle{
			padding: 16rpx 25rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			.mainMiddleName:first-child{
				padding-top: 0;
				border: 0;
			}
			.mainMiddleName{
				margin: 20rpx;
				padding-top: 16rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: #EAEAEA 1rpx solid;
				.Left{
					.light{
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #646566;
					}
					input{
						width: 350rpx;
					}
				}
			}
		}
		.jobAddress{
			margin-top: 20rpx;
			padding: 15rpx 45rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #FFFFFF;
			border-radius: 20rpx;
      flex:1;
			.jobAddressLeft{
        flex:1;
				.light{
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #646566;
				}
				input{
				}
			}
		}

	}
}

</style>
